<!-- 滚动吸附效果演示 -->
<template>
	<view>
	
		<!--基础信息-->
		<view class="btName">基础信息</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">费用名称</text>
			<view v-if="infoObj.name" class="width276 color333">{{infoObj.name}}</view>
			<view v-else class="width276">暂无</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">支付金额</text>
			<view v-if="infoObj.money" class="width276 color333">{{infoObj.money}}</view>
			<view v-else class="width276">暂无</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">支付类型</text>
			<view v-if="infoObj.type_name" class="width276 color333">{{infoObj.type_name}}</view>
			<view v-else class="width276">暂无</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">支付日期</text>
			<view v-if="infoObj.handle_date" class="width276 color333">{{infoObj.handle_date}}</view>
			<view v-else class="width276">暂无</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">银行卡号</text>
			<view v-if="infoObj.bank_name" class="width276 color333">{{infoObj.bank_name}}</view>
			<view v-else class="width276">暂无</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">备注说明</text>
			<view v-if="infoObj.remark" class="width276 color333">{{infoObj.remark}}</view>
			<view v-else class="width276">暂无</view>
		</view>
		<!-- <view class="flex-white-plr26-column ptb20 mt32">
			<view style="margin-bottom: 8rpx;">相关图片</view>
			<u-upload :max-size="5 * 1024 * 1024" max-count="9" :auto-upload="false"></u-upload>
		</view> -->
		<!--系统信息-->
		

		<view class="btName">系统信息</view>
		
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">审核人员</text>
			<view v-if="infoObj.audit_user_name" class="width276 color333">
				{{infoObj.audit_user_name}}
			</view>
			<view v-else class="width276">暂无</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">审核时间</text>
			<view v-if="infoObj.audit_time" class="width276 color333">
				{{infoObj.audit_time}}
			</view>
			<view v-else class="width276">暂无</view>
		</view>
		
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">经手人员</text>
			<view v-if="infoObj.handle_user_id" class="width276 color333">{{infoObj.handle_user_name}}</view>
			<view v-else class="width276">暂无</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">创建人</text>
			<view v-if="infoObj.create_user_id" class="width276 color333">{{infoObj.create_user_name}}</view>
			<view v-else class="width276">暂无</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">创建时间</text>
			<view v-if="infoObj.create_time" class="width276 color333">
				{{infoObj.create_time}}
			</view>
			<view v-else class="width276">暂无</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">更新时间</text>
			<view v-if="infoObj.update_time" class="width276 color333">{{infoObj.update_time}}</view>
			<view v-else class="width276">暂无</view>
		</view>

		<view class="bottomClass">
		<view class="bottomBox">
			<!-- 未审核状态：显示审核按钮，隐藏编辑删除 -->
			<view v-if="!infoObj.status || infoObj.status === 0" class="tabbarItem" @click="auditFun">
				<u-icon class="tabImg" size="40" height="40" name="checkmark-circle"></u-icon>
				<view>审核</view>
			</view>
			<!-- 已审核状态：显示撤销审核按钮，隐藏编辑删除 -->
			<view v-else class="tabbarItem" @click="undoAuditFun">
				<u-icon class="tabImg" size="40" height="40" name="close-circle"></u-icon>
				<view>撤销审核</view>
			</view>
			<!-- 未审核状态：显示编辑按钮 -->
			<view v-if="!infoObj.status || infoObj.status === 0" class="tabbarItem" @click="pageBianjiFun">
				<u-icon class="tabImg" size="40" height="40" name="edit-pen-fill"></u-icon>
				<view>编辑</view>
			</view>
			<!-- 未审核状态：显示删除按钮 -->
			<view v-if="!infoObj.status || infoObj.status === 0" class="tabbarItem" @click="deleteDataFun">
				<u-icon class="tabImg" size="40" height="40" name="trash"></u-icon>
				<view>删除</view>
			</view>
		</view>
		</view>
		
	</view>
</template>

<script>
	let that = '';
	import { apiFinExpensesRecord} from '@/api/crm.js'
	import bottomBox from '@/components/bottomBox/bottomBox'
	import getMore from '@/components/getMore/getMore.vue'
	
	export default {
		components: {
			bottomBox,getMore
		},
		data() {
			return {
				infoObj: {},
				sheetList: [{
						text: '更换负责人'
					},
					{
						text: '放入客户池'
					},
					{
						text: '删除'
					},
				],
				cardIndex: 0,
				isLoadSelectPageById: false
			}
		},
		watch: {
			infoObj: function(n, o) {
				console.log(n, o)
			}
		},
		onLoad(e) {
			let that = this;
			that.infoObj = uni.$expensesRecordInfo || {}
			that.cardIndex = e.index;
			if (e.id) {
				that.reLoadSelectPageByIdFun(e.id)
			}
			
		},
		onShow() {
			if (this.isLoadSelectPageById) {
				this.reLoadSelectPageByIdFun(this.infoObj.id)
			}
		},
		onBackPress(e) {
			if (e.from == 'backbutton' && this.cardIndex != -1) {
				uni.$emit('updateGjListByIndex', {
					index: this.cardIndex,
					obj: this.infoObj
				})
			}
		},
		methods: {
			// 新增跟进信息
			pageGenjinFun: function() {
				let that=this;
				that.isLoadSelectPageById = true;
				uni.navigateTo({
					url: '../cst_trace/add?customer_name=' + that.infoObj.customer_name + '&customer_id=' +
						that.infoObj
						.customer_id + '&bus_type=fin_rece_record' + '&bus_id=' + that.infoObj.id +
						'&bus_name=' + that
						.infoObj.bus_name
				})
			},
			// 修改信息
			pageBianjiFun: function() {
				let that=this;
				that.isLoadSelectPageById = true;
				uni.$infoObj = that.infoObj;
				uni.navigateTo({
					url: './add?type=update'
				})
			},
			// 审核方法
			auditFun: function() {
				let that = this;
				uni.showModal({
					title: '审核确认',
					content: '是否确认审核该支出记录?',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '审核中...',
								mask: true
							})
							let reqData = {
								action: 'audit',
								params: {
									req: {
										id: that.infoObj.id
									}
								}
							}
							apiFinExpensesRecord(reqData)
								.then(res => {
									if (res.code == 1) {
										uni.showToast({
											title: '审核成功!',
											duration: 888,
											icon: 'none'
										})
										// 刷新页面数据
										that.reLoadSelectPageByIdFun(that.infoObj.id)
									} else {
										uni.showToast({
											title: '审核失败: ' + res.msg,
											duration: 2000,
											icon: 'none'
										})
									}
								})
						}
					}
				})
			},
			// 撤销审核方法
			undoAuditFun: function() {
				let that = this;
				uni.showModal({
					title: '撤销审核确认',
					content: '是否确认撤销该支出记录的审核?',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '撤销审核中...',
								mask: true
							})
							let reqData = {
								action: 'cancel',
								params: {
									req: {
										id: that.infoObj.id
									}
								}
							}
							apiFinExpensesRecord(reqData)
								.then(res => {
									if (res.code == 1) {
										uni.showToast({
											title: '撤销审核成功!',
											duration: 888,
											icon: 'none'
										})
										// 刷新页面数据
										that.reLoadSelectPageByIdFun(that.infoObj.id)
									} else {
										uni.showToast({
											title: '撤销审核失败: ' + res.msg,
											duration: 2000,
											icon: 'none'
										})
									}
								})
						}
					}
				})
			},
			// 删除方法
			deleteDataFun: function() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否确认删除该支出记录?',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '删除中...',
								mask: true
							})
							let reqData = {
								action: 'del',
								params: {
									req: {
										id: that.infoObj.id
									}
								}
							}
							apiFinExpensesRecord(reqData)
								.then(res => {
									uni.showToast({
										title: '删除成功!',
										duration: 888,
										icon: 'none'
									})
									uni.$emit('deleteCardFun', {
										index: that.cardIndex
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 666)
								})
						}
					}
				})
			},
			reLoadSelectPageByIdFun: function(_id) {
				let that = this;
				that.isLoadSelectPageById = false;
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let reqData = {
					action: 'get_detail',
					params: {
						req:{
							id:_id
						}
					}
				}
				apiFinExpensesRecord(reqData)
					.then(res => {
						console.log(res)
						if (res.code == 1) {
							that.infoObj = res.data
				
							//延时关闭  加载中的 loading框
							setTimeout(() => {
								uni.hideLoading()
							}, 888);
							
						} else {
							uni.showModal({
								title: '提示',
								content: '相关内容不存在，或者已被删除！',
								showCancel: false,
								success() {
									uni.navigateBack()
								}
							})
						}
				})
			},
			
	
		}
	}
</script>


<style>
	page {
		background-color: #F8F8F8;
		padding-bottom: 88px;
	}

	.color333 {
		color: #666666;
	}

	.btName {
		margin-bottom: 16rpx;
	}

	.flexC {
		display: flex;
		align-items: center;
	}

	.p8Img {
		padding: 8rpx;
		width: 40rpx;
		height: 40rpx;
		margin-left: 16rpx;
	}

	.p8 {
		padding: 8rpx;
	}

	.noMoreTs {
		width: 100%;
		margin: 32rpx 0;
		text-align: center;
	}

	.bottomClass {
		width: 100%;
		position: fixed;
		bottom: 0;
	}
	
	.bottomBox {
		width: 100%;
		height: 55px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #FFFFFF;
		border-top: 1rpx solid #DDDDDD;
		font-size: 14px;
	}
	
	.tabbarItem {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		padding: 0 36rpx;
	}
	
	.tabbarItem:active {
		background-color: #EEEEEE;
	}
	
	.tabbarItem>.tabImg {
		margin-bottom: 8rpx;
	}
	
</style>